<template>
  <div class="flex-h flex-vc fontsize28 xb_border_bottom ddd input-line">
    <img
      class="icon"
      :src="icon"
    >
    <div class="flex1">
      <input
        type="text"
        :placeholder="placeholder"
        v-model="text"
        :readonly="readonly"
      >
    </div>
    <img
      class="delete"
      src="../assets/changeinfo_delete.png"
      v-show="showClearBtn"
      @click="clearText"
    >
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    // 输入框的图标
    icon: {
      type: String,
      default: null
    },
    // 提示文字
    placeholder: {
      type: String,
      default: ''
    },
    // 默认值
    // value: {
    //   type: String,
    //   default: ''
    // },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      text: ''
    }
  },
  computed: {
    showClearBtn() {
      return !this.readonly && this.text
    }
  },
  methods: {
    clearText() {
      this.text = ''
    },
    getValue() {
      return this.text.trim()
    }
  }
}
</script>

<style>
.input-line {
  width: 630px;
  height: 80px;
  padding: 40px 30px 0 30px;
  color: #333333;
  position: relative;
}
.input-line > .icon {
  width: 60px;
  height: 60px;
  margin-right: 65px;
}
.input-line > div {
  height: 100%;
}
.input-line input {
  border: none;
  width: 100%;
  height: 100%;
}
.input-line > .delete {
  width: 32px;
  height: 32px;
  margin-left: 30px;
}
</style>
